<template>
  <XNavigateBackIcon></XNavigateBackIcon>
  <view class="pageWrap" :style="styles">
    <XNavBar title="详情" titleColor="#000000" bgColor="#ffffff"></XNavBar>
    <view class="pageContent" v-if="state.detail.title">
      <view class="title">
        <text>{{ state.detail.title }}</text>
      </view>
      <view class="numAndTime">
        <text class="text">{{ state.detail.create_time }}</text>
        <text class="text">浏览量：{{ state.detail.browse_num }}</text>
      </view>
      <!-- <XPicture class="pictureWrap img" :url="fileUrl(state.detail.img)"></XPicture> -->
      <view class="content" v-html="xxx(state.detail.content)"></view>
    </view>
    <XNothing v-else></XNothing>
  </view>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
import { onLoad, onShow, onShareTimeline } from "@dcloudio/uni-app";
import { request, catchException } from "@/util/request";
import { setPagePadding } from "@/util/util";
onLoad((query) => {
  state.query.id = query.id || "";
  // #ifdef MP-WEIXIN
  uni.showShareMenu({});
  // #endif
  getDetail();
});
onShow(() => {});
onShareTimeline(() => ({}));
const styles = computed(() => setPagePadding());
const state = reactive({
  query: { id: "" },
  detail: {
    id: "",
    img: "",
    title: "",
    content: "",
    browse_num: 0,
    change_time: "",
    create_time: "",
  },
});
async function getDetail() {
  try {
    const res = await request({
      url: "wechat/news/detail",
      data: { id: state.query.id },
    });
    state.detail = res.data.content;
  } catch (error) {
    catchException(error);
  }
}
function xxx(str: string) {
  return str.replace(
    /\<img/gi,
    '<img style="width:100% !important;height:auto !important;display:block !important;"',
  );
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
